/**
 * Allows GroupTab to render a table structure.
 */
Ext.define('Ext.ux.GroupTabRenderer', {
	alias : 'plugin.grouptabrenderer',
	extend : 'Ext.AbstractPlugin',

	tableTpl : new Ext.XTemplate('<div id="{view.id}-body" class="'
					+ Ext.baseCSSPrefix + '{view.id}-table '
					+ Ext.baseCSSPrefix
					+ 'grid-table-resizer" style="{tableStyle}">', '{%',
			'values.view.renderRows(values.rows, values.viewStartIndex, out);',
			'%}', '</div>', {
				priority : 5
			}),

	rowTpl : new Ext.XTemplate(
			'{%',
			'Ext.Array.remove(values.itemClasses, "',
			Ext.baseCSSPrefix + 'grid-row");',
			'var dataRowCls = values.recordIndex === -1 ? "" : " '
					+ Ext.baseCSSPrefix + 'grid-data-row";',
			'%}',
			'<div {[values.rowId ? ("id=\\"" + values.rowId + "\\"") : ""]} ',
			'data-boundView="{view.id}" ',
			'data-recordId="{record.internalId}" ',
			'data-recordIndex="{recordIndex}" ',
			'class="'
					+ Ext.baseCSSPrefix
					+ 'grouptab-row {[values.itemClasses.join(" ")]} {[values.rowClasses.join(" ")]}{[dataRowCls]}" ',
			'{rowAttr:attributes}>',
			'<tpl for="columns">' + '{%',
			'parent.view.renderCell(values, parent.record, parent.recordIndex, xindex - 1, out, parent)',
			'%}', '</tpl>', '</div>', {
				priority : 5
			}),

	cellTpl : new Ext.XTemplate(
			'{%values.tdCls = values.tdCls.replace(" ' + Ext.baseCSSPrefix
					+ 'grid-cell "," ");%}',
			'<div class="' + Ext.baseCSSPrefix
					+ 'grouptab-cell {tdCls}" {tdAttr}>',
			'<div {unselectableAttr} class="'
					+ Ext.baseCSSPrefix
					+ 'grid-cell-inner" style="text-align: {align}; {style};">{value}</div>',
			'<div class="x-grouptabs-corner x-grouptabs-corner-top-left"></div>',
			'<div class="x-grouptabs-corner x-grouptabs-corner-bottom-left"></div>',
			'</div>', {
				priority : 5
			}),

	selectors : {
		// Outer table
		bodySelector : 'div.' + Ext.baseCSSPrefix + 'grid-table-resizer',

		// Element which contains rows
		nodeContainerSelector : 'div.' + Ext.baseCSSPrefix
				+ 'grid-table-resizer',

		// row
		itemSelector : 'div.' + Ext.baseCSSPrefix + 'grouptab-row',

		// row which contains cells as opposed to wrapping rows
		dataRowSelector : 'div.' + Ext.baseCSSPrefix + 'grouptab-row',

		// cell
		cellSelector : 'div.' + Ext.baseCSSPrefix + 'grouptab-cell',

		getCellSelector : function(header) {
			var result = 'div.' + Ext.baseCSSPrefix + 'grid-cell';
			if (header) {
				result += '-' + header.getItemId();
			}
			return result;
		}

	},

	init : function(grid) {
		var view = grid.getView(), me = this;
		view.addTableTpl(me.tableTpl);
		view.addRowTpl(me.rowTpl);
		view.addCellTpl(me.cellTpl);
		Ext.apply(view, me.selectors);
	}
});
